<template>
	<!-- 分页器 -->
	<div class="page">
	  <el-pagination
		v-show="total > pageSize"
		background
		:page-size="pageSize"
		:layout="layout"
		:total="total"
		:current-page="currentPage"
		@current-change="handleCurrentChange"
	  />
	</div>
  </template>
  
  <script setup>
  import { defineProps, defineEmits } from 'vue';
  
  // 定义组件的 props
  const props = defineProps({
	total: {
	  required: true,
	  type: Number,
	},
	pageSize: {
	  required: true,
	  type: Number,
	},
	currentPage: {
	  type: Number,
	  default: 1,
	},
	scrollTop: {
	  type: Boolean,
	  default: true,
	},
	layout: {
	  type: String,
	  default: "total, prev, pager, next",
	},
  });
  
  // 定义 emit 事件
  const emit = defineEmits(['handleCurrentChange']);
  
  // 处理分页器变化
  const handleCurrentChange = (page) => {
	emit("handleCurrentChange", page);
	if (props.scrollTop) {
	  // 返回顶部
	  const view = document.querySelector(".view");
	  if (view) view.scrollTop = 0;
	}
  };
  </script>
  
  <style lang="less" scoped></style>
  